<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-3.0.0.js"></script>
</head>
<body>
    <div id="box" style="width:800px;height: 800px;border: 1px solid #ccc;">
    <div id="float_box" style="position: absolute;background:red;border: 1px solid #ccc;width:117px;height: 55px;left:0px;top: 0px">

    <!-- <img src="./2.PNG"    alt="">    -->
    </div>
</div>
    <script>
        $(function(){
            var box=document.getElementById("box");
            var obj=document.getElementById("float_box");
            console.log(obj);
    //alert(typeof obj);
    var x=0;
    var y=0;
    var xin=true;
    var yin=true;
    var step=1;
    var delay=20;
    //alert(document.body.offsetHeight);
    
    function floata(){
        
        var L=0;
        var T=0;
        var maxW=box.offsetWidth-obj.offsetWidth;
        
        var maxT=box.offsetHeight-obj.offsetHeight;
        //alert(maxT);
        if(x<L){
            xin=true;

            x=L;
        };
        if(y<T){
            yin=true;
            y=T;
        }
        if(x>maxW){
            xin=false;x=maxW;
        }
        if(y>maxT){
            yin=false;y=maxT;
        }
        x=x+step*(xin?1:-1);
        y=y+step*(yin?1:-1);
        console.log(y);
        //alert(x);
        obj.style.left=x+'px';
        obj.style.top=y+'px';
        //console.log(obj.style.left);
        //alert(obj.style.left);
        //alert($('#float_box')[0].style.left);
    }
    var t=setInterval(floata,delay);
    obj.onmouseover=function(){
        clearInterval(t);
    }
    obj.onmouseout=function(){
        t=setInterval(floata,delay);
    }
    
        })
    
    </script>
</body>
</html>